<template>
	<view class="invite-code">
		<NavBar :title="title"/>
		<view class="content">
			<view class="canvas">
				<UQRCode class="code" :value="httpUrl" canvas-id="qrcode" :size="200" @complete="comp"/>
				<canvas canvas-id="inviteID" type="2d" />
			</view>
			<view class="btn-box">
				<view class="btn" @tap="save"> 保存 </view>
				<view class="btn share" @tap="share"> 分享 </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref, getCurrentInstance } from 'vue';
	import { onLoad, onReady } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import UQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue';
	import { useAgentStore } from '@/store/index.js'
	const ctx = getCurrentInstance()
	const imgUrl = ref('/static/icon/share-bg.png')
	const title = ref()
	const httpUrl = ref()
	const code = ref()
	// 二维码生成成功的函数
	const comp = (e)  => {
		uni.canvasToTempFilePath({
			canvasId: 'qrcode',
			success: (res) => {
				code.value = res.tempFilePath
				initCanvas()
			}
		})
	}
	const initCanvas = () => {
		const ctx = uni.createCanvasContext('inviteID')
		// 绘制内容，应用缩放和平移
		ctx.save();
		// 绘制图片
		ctx.drawImage("/static/icon/share-bg.png", 0, 0, 280,360)
		ctx.drawImage(code.value, 41, 70, 200,200)
		ctx.drawImage("/static/icon/agent/canvasbgc.png",40,278,200,32)
		ctx.setFontSize(14) // 字体大小
		ctx.setFillStyle('#666666') // 字体颜色
		ctx.fillText('扫码即可下载软件，入驻商户', 50, 330) // 添加字体
		ctx.save()
		ctx.restore(); // 恢复到之前保存的状态
		// ctx.setFillStyle('#FF4847')
		// ctx.fillRect(76, 333, 200, 32)
		ctx.setFontSize(16) // 字体大小
		ctx.setFillStyle('#FFFFFF') // 字体颜色
		ctx.fillText(title.value + '入驻平台二维码', 50, 300)
		ctx.draw()
	}
	const save = () => {
		// canvas 转图片
		uni.canvasToTempFilePath({
			quality: 1,
			canvasId:'inviteID',
			success: (e) => {
				// 图片保存到相册
				uni.saveImageToPhotosAlbum({
					filePath: e.tempFilePath,
					success: () => { 
            getApp().globalData.toast('保存成功')
					}
				})
			}
		})
	}
  const sType = ref(1)
  const share = () => {
    const { agentInfo } = useAgentStore()
    const url = import.meta.env.VITE_APP_SHARE_URL
    // if (plus.os.name == 'Android') {
    //   plus.runtime.launchApplication({ pname: 'com.tencent.mm' }, function (e) {
    //     console.log('打开微信失败：' + e.message);
    //   });
    // } else if (plus.os.name == 'iOS') {
    //   plus.runtime.launchApplication({ action: 'weixin://' }, function (e) {
    //     console.log('打开微信失败：' + e.message);
    //   });
    // }
    // uni.getImageInfo({
    //   src: 'http://8.219.183.223/uploads/images/20241223/428d054342567175cfd9719c6d2973f0.png',
    //   fail: (err) => {
    //     console.log(err);
    //   },
    //   success: (res) => {
    //     console.log(res.path);
    //     let shareParam = {
    //       provider: "weixin", // 分享服务提供商
    //       scene: "WXSceneSession", // 分享到聊天界面，若要分享到朋友圈则改为WXSceneTimeline
    //       type: 0, // 分享形式为图文
    //       href: `${url}?type=${sType.value==1?'shop':'rider'}&tid=${agentInfo.id}`, // 要分享的链接
    //       title: sType.value==1?'商户邀请':'骑手邀请', // 分享的标题
    //       summary: '一家有温度的外卖平台', // 分享内容的摘要
    //       imageUrl: res.path// 分享图标
    //     };
    //     uni.share({
    //     	...shareParam,
    //     	success: function (res) {
    //     		console.log("success:" + JSON.stringify(res));
    //     	},
    //     	fail: function (err) {
    //     		console.log("fail:" + JSON.stringify(err));
    //     	}
    //     });
    //   }
    // })
  }
	onLoad((e) => {
		const { type } = e
		const { agentInfo } = useAgentStore()
    const url = import.meta.env.VITE_APP_SHARE_URL
    sType.value = type
		if(type == 1) {
			title.value = '邀请商户'
			httpUrl.value = url + '?type=shop&tid=' + agentInfo.id
		} else {
			title.value = '邀请骑手'
			httpUrl.value = url + '?type=rider&tid=' + agentInfo.id
		}
	})
</script>

<style scoped lang="scss">
	.invite-code {
		.content {
			text-align: center;
			padding: 60rpx 20rpx;
		}
		.canvas {
			margin: auto;
			width: 280px;
			height: 360px;
			position: relative;
			canvas {
				width: 280px;
				height: 360px;
			}
			.code {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.btn-box {
			display: flex;
			margin-top: 20px;
			align-items: center;
			justify-content: center;
			.btn {
				width: 120px;
				height: 40px;
				color: #FF3B1E;
				font-size: 16px;
				font-weight: 400;
				line-height: 40px;
				text-align: center;
				border-radius: 99px 99px 99px 99px;
				border: 1px solid #FF3B1E;
			}
			.share {
				color: #FFFFFF;
				margin-left: 20px;
				background: #FF3B1E;
			}
		}
	}
</style>
